import { Button, Checkbox, Modal } from 'antd-mobile';
import { NavBar } from 'antd-mobile';
import axios from 'axios';
import React from 'react'
import { useMemo } from 'react';
import { useState } from 'react';
import { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { useNavigate, useSearchParams } from 'react-router-dom'
import { AddCircleOutline } from 'antd-mobile-icons'
import { list1 } from '../../store/chengk';
import { useDispatch } from 'react-redux';
import icmg from '../img/image copy.png'


function Order() {
    const navigate = useNavigate()
    const [data, setData] = useState([])
    const [params] = useSearchParams();
    const id = params.get("id");
    const chengk = useSelector((state) => state.chengk)
    const dispatch = useDispatch()
    const getData = async () => {
        const res = await axios.get(`/api/trip/train/detail?id=${id}`);
        console.log(res);
        setData(res.data.data)
    }
    useEffect(() => {
        getData()
    }, [])

    const useList = useMemo(() => {
        return (
            chengk.filter((item) => item.status)
        )
    }, [chengk]);
    return (
        <div>
            <NavBar back='返回' onBack={() => {
                navigate(-1)
            }}>
                填写订单
            </NavBar>

            <div>
                <div>
                    <span>
                        10月13日 {data.start} <span> -> </span> {data.end}
                    </span>
                    <br />

                    <span>
                        车票￥{data.tick?.firstTick}
                    </span>
                    <span>
                        出行无忧￥{data.tick?.secondTick}
                    </span>
                </div>

                <div>
                    <h2>选择乘客</h2>

                    <div>
                        {
                            useList.map((item, index) => {
                                return (
                                    <div key={index}  >
                                        {item.name}  <Checkbox checked={item.status} onClick={() =>
                                            Modal.alert({
                                                content: '删除成功',
                                                onConfirm: () => {
                                                    console.log('Confirmed')
                                                },
                                            })
                                        } onChange={(val) => {
                                            dispatch(
                                                list1({
                                                    index,
                                                    checked: val,
                                                })

                                            );


                                        }} />
                                    </div>
                                )
                            })
                        }
                    </div>

                    <div>
                        <Button onClick={() => {
                            navigate('/orderlist')
                        }} style={{ textAlign: 'center' }} color='warning'><AddCircleOutline />添加乘客(成人/学生/儿童)</Button>

                    </div>

                    <div>
                        <img src={icmg} alt="" />
                    </div>

                </div>


            </div>

            <div style={{ display: 'flex', float: 'right' }}>

                <span >{data.tick?.secondTick}</span>
                <Button onClick={() => {
                    navigate(`/toorder?id=${id}`)
                }} color='danger' style={{ width: '131px', height: '40px' }}> <span color='#fff'>提交订单</span></Button>
            </div>
        </div>
    )
}

export default Order